<template>
  <div class="home">
    <img
      class="logo"
      src="../assets/image/saobei.png"
    ><br>
    <div class="p_title">利楚扫呗新春年会大抽奖</div>
    <div class="zi p_prize">
      <span class="zi text">补抽</span>
    </div>
    <div class="list">
      <!-- 添加到获奖列表遍历 -->
      <p class="title text">中奖名单</p>
      <div
        v-for="lottery in lottery_list"
        :key="lottery.id"
        class="l_user"
      >
        <div class="l_id"></div>
        <div class="l_name">{{lottery.department}}-{{lottery.name}}</div>
      </div>
      <br>
      <img
        v-if="isFade"
        class="btn"
        src="../assets/image/btn.png"
        @click="beginRoll(present.num);"
      >
      <img
        v-if="isFader"
        class="btn"
        src="../assets/image/btn2.png"
        @click="stopRoll();"
      >
      <p
        class="con"
        v-if="isStop"
      >恭喜以上获奖同事！</p>
    </div>

  </div>
</template>

<script>
import store from "@/vuex/store";
import { Random_lottery } from "@/utils/lottery";
export default {
  store,
  data() {
    return {
      present: {
        prize: "",
        name: "",
        num: ""
      },
      users: [],
      user: {
        id: "?",
        name: "谁是幸运儿?"
      },
      isBegin: false,
      timeInterJS: null,
      lottery_list: [],
      lottery_num: 0,
      ran: 0,
      isStop: false,
      isFade: true,
      isFader: false,
      status: 0
    };
  },
  watch: {},
  computed: {},
  methods: {
    nextView() {
      this.$router.push("/lottery");
    },
    beginRoll(num) {
      this.isBegin = true;
      this.isFade = false;
      this.isFader = true;
      var _this = this;
      this.timeInterJS = setInterval(function() {
        _this.lottery_list = Random_lottery(_this.users, num);
      }, 200);
    },
    stopRoll() {
      clearInterval(this.timeInterJS);
      this.isStop = true;
      this.isFader = false;
      // this.lottery_list.push(this.user);
      // this.users.splice(this.ran, 1);
      for (let i = 0; i < this.lottery_list.length; i++) {
        var lotteryIndex = this.users.indexOf(this.lottery_list[i]);
        this.users.splice(lotteryIndex, 1);
      }
      window.localStorage.setItem(`prize0`, JSON.stringify(this.lottery_list));
    }
  },
  created() {
    var _this = this;
    document.onkeydown = function() {
      let key = window.event.keyCode;
      if (key == 32) {
        if (_this.isBegin) {
          _this.stopRoll();
        } else {
          _this.beginRoll(1);
        }
        // _this.isBegin = !_this.isBegin;
        // console.log("begin");
      }
      if (key == 39) {
        _this.nextView();
      }
    };
  },
  mounted() {
    this.status = this.$store.state.status;
    this.users = this.$store.state.users;
    this.present = this.$store.state.present[this.status];
  },
  beforeDestroy() {}
};
</script>
<style scoped>
.home {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("../assets/image/beijing.png") center center no-repeat;
  background-size: cover;
  text-align: center;
}
.logo {
  margin-top: 3%;
  width: 150px;
}
.p_title {
  margin-top: 50px;
  font-family: HWXK;
  font-size: 60px;
  background-image: linear-gradient(to bottom, #dec26f, #f4ecb9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  /* width: 400px;
  position: absolute;
  left: 200px;
  top: 150px; */
}
.p_prize {
  width: 100%;
  text-align: center;
  margin-top: 1%;
}
.btn {
  margin-top: 50px;
  width: 300px;
}
.p_image {
  margin-top: 40px;
  width: 90%;
  height: 70%;
  border-radius: 10px;
}
.right {
  text-align: center;
  padding-right: 10%;
}
.present {
  display: inline-block;
  text-align: center;
  margin-top: 70px;
  margin-left: 15%;
  width: 70%;
  height: 500px;
  border-right: 1px solid #e9696a;
}
.user {
  position: relative;
  bottom: 40px;
}
.u_id {
  display: inline-block;
  width: 80px;
  height: 80px;
  background: url("../assets/image/circle.png") center center no-repeat;
  background-size: 80px;
  border-radius: 50%;
  line-height: 80px;
  font-size: 45px;
  color: #db0a0a;
}
.u_name {
  display: inline-block;
  height: 80px;
  margin-left: 20px;
  line-height: 50px;
  font-size: 50px;
  color: white;
}
.l_user {
  display: inline-block;
  padding-top: 10px;
  margin-top: 15px;
  width: 20%;
  height: 25%;
  text-align: center;
}
.l_id {
  background: url("../assets/image/circle.png") center center no-repeat;
  background-size: 60px;
  width: 60px;
  height: 60px;
  color: #db0a0a;
  font-size: 30px;
  line-height: 60px;
  margin: 0 auto;
}
.l_name {
  margin-top: 20px;
  font-size: 25px;
  height: 50px;
  color: white;
}
.con {
  margin-top: 50px;
  font-size: 50px;
  color: #fbe986;
  font-family: HWXK;
}
.zi {
  font-size: 35px;
  color: white;
}
.b_title {
  color: white;
}
.title {
  margin-top: 30px;
  font-size: 35px;
  color: white;
}
.text {
  font-family: KaiTi_GB2312;
}
.list {
  width: 80%;
  margin-left: 10%;
}
</style>